<template>
  <!-- 修改居民 -->
  <div class="main">
    <div class="select">
      <el-row class="pt">基本信息</el-row>
      <el-row>
        <el-col :span="6">
          <div>
            <el-form label-width="80px">
              <el-form-item label="求助类型:">
                <el-select
                  filterable
                  v-model="editform.helpvalue"
                  placeholder="请选择"
                  class="type"
                >
                  <el-option
                    v-for="item in helptype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <div>
            <el-form label-width="80px">
              <el-form-item label="紧急度:">
                <el-select
                  filterable
                  v-model="editform.radiusvalue"
                  placeholder="请选择"
                  class="type"
                >
                  <el-option
                    v-for="item in radiustype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <div>
            <el-form label-width="80px">
              <el-form-item label="状态:">
                <el-select
                  filterable
                  v-model="editform.statusvalue"
                  placeholder="请选择"
                  class="type"
                >
                  <el-option
                    v-for="item in statustype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option> </el-select></el-form-item
            ></el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form :inline="true"  label-width="80px">
            <el-form-item label="检测时间:">
              <el-date-picker
                size="small"
                v-model="editform.formInline"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker> </el-form-item
          ></el-form>
        </el-col>
        <el-col :span="6" :offset="1">
          <div>
            <el-form label-width="80px">
              <el-form-item label="姓名:">
                <el-input v-model="editform.userName"></el-input> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-form label-width="80px">
            <el-form-item label="手机号码:">
              <el-input
                v-model="editform.phoneNumber"
              ></el-input> </el-form-item
          ></el-form>
        </el-col>
      </el-row>
      <div class="buttom">
        <el-button @click="reset">重置</el-button>
        <el-button @click="searchinfo" type="primary">查询</el-button>
      </div>
    </div>
    <div class="content">
      <div class="content-title">
        <span>查询列表</span>
        <span>
          <el-button @click="exportEmergencyInfo"> 导出</el-button>
          <el-button
            type="primary"
            @click="handleResult('all')"
            :disabled="this.multipleSelection.length == 0"
            >分配</el-button
          >
        </span>
      </div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick(activeName)"
      >
        <el-tab-pane
          :label="`未处理 ${nohandle.length}`"
          name="1"
        ></el-tab-pane>
        <el-tab-pane :label="`已处理 ${handled.length}`" name="3"></el-tab-pane>
      </el-tabs>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="userName" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号码"> </el-table-column>
        <el-table-column prop="type" label="求助类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type | TypeText }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="求助内容"> </el-table-column>
        <el-table-column prop="createTime" label="申请时间"> </el-table-column>
        <el-table-column prop="level" label="紧急度" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.level | Typelevel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealName" label="处理人"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state | statusType }}</span>
          </template>
        </el-table-column>
        <el-table-column width="220" prop="edits" label="操作">
          <template slot-scope="scope">
            <span class="editcolor" @click="viewinfo(scope.$index, scope.row)"
              >查看</span
            >
            <span
              class="editcolor"
              @click="handleResult(scope.$index, scope.row)"
              >分配</span
            >
            <span class="editcolor" @click="editinfo(scope.$index, scope.row)"
              >处理</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <Pagination
          :total="page_total"
          @pageChange="pageChange"
          :page="page"
        ></Pagination>
      </div>
    </div>

    <!--    修改分配弹窗-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-form label-width="90px">
        <el-form-item label="紧急度:">
          <el-select
            filterable
            v-model="radiusdialogData.level"
            placeholder="请选择"
          >
            <el-option
              v-for="item in radiustype"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理人:">
          <el-select
            filterable
            v-model="radiusdialogData.dealId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in handlepslist"
              :key="item.inhabitantId"
              :label="item.memberName"
              :value="item.inhabitantId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible2 = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="radiustypeconfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { exportExcel } from "../../utils/util";
import { Message } from "element-ui";
const initEditform = {
  userName: "",
  phoneNumber: "",
  radiusvalue: "",
  helpvalue: "",
  statusvalue: "",
  formInline: [],
}
export default {
  name: "urgent",
  data() {
    return {
      tablelist: [],
      dialogVisible1: false,
      dialogVisible2: false,
      activeName: "1",
      helptype: [
        { value: 1, label: "买药" },
        { value: 2, label: "看病" },
        { value: 3, label: "生活用品" },
        { value: 4, label: "其他" },
      ],
      radiustype: [
        { value: 0, label: "请选择" },

        { value: "1", label: "紧急" },
        { value: "2", label: "较急" },
        { value: "3", label: "一般" },
      ],
      radiusdialogData: {},
      radiusselectvalue: "",
      statustype: [
        { value: 1, label: "未处理" },
        { value: 3, label: "已处理" },
      ],
      handlepslist: [],
      handleps: "",
      page: {
        page_index: 1,
        page_limit: 10,
      },
      page_total: 0, //总条数
      editform: { ...initEditform },
      nohandle: [],
      hashandle: [],
      handled: [],
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    this.searchinfo();
    this.helppslist();
  },
  filters: {
    TypeText(type) {
      let tyepText = null;
      switch (type) {
        case "1":
          tyepText = "买药";
          break;
        case "2":
          tyepText = "看病";
          break;
        case "3":
          tyepText = "生活用品";
          break;
        case "4":
          tyepText = "其他";
          break;
        default:
          tyepText = null;
          break;
      }
      return tyepText;
    },
    Typelevel(type) {
      let tyepText = "";
      switch (type) {
        case "1":
          tyepText = "紧急";
          break;
        case "2":
          tyepText = "较急";
          break;
        case "3":
          tyepText = "一般";
          break;
        default:
          tyepText = "";
          break;
      }
      return tyepText;
    },
    statusType(type) {
      let tyepText = "";
      switch (type) {
        case "1":
          tyepText = "未处理";
          break;
        case "3":
          tyepText = "已处理";
          break;
        default:
          tyepText = "";
          break;
      }
      return tyepText;
    },
  },
  mounted() {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    exportEmergencyInfo() {
      // this.initpage();
      this.$ajax.lu.exportEmergencyInfo().then((data) => {
        console.log(data, 88888);
        exportExcel(data, "求助信息列表导出.xls");
      });
    },
    async searchinfo() {
      let params = {
        pageNo: this.page.page_index,
        pageSize: this.page.page_limit,
        userName: this.editform.userName,
        phoneNumber: this.editform.phoneNumber,
        level: this.editform.radiusvalue,
        type: this.editform.helpvalue,
        state: this.editform.statusvalue,
        startTime: this.editform.formInline[0],
        endTime: this.editform.formInline[1],
      };
      let { data } = await this.$ajax.lu.findAllEmergencyList(params);
      this.tablelist = data ? data.list : [];
      this.tableData = this.tablelist;
      this.page_total = data.total;
      this.handleClick(this.activeName);
    },
    async handleinfo() {
      const dealId = String(this.radiusdialogData.dealId)
      const radiusdialogData = {
        ...this.radiusdialogData,
        dealId
      }
      const url = this.radiusdialogData.reqUrl;
      delete radiusdialogData.reqUrl
      let params = {
        ...radiusdialogData
      };
      let { code } = await this.$ajax.lu[url](params);
      console.log(code);
      if (code == "0000") {
        console.log(999);
        this.searchinfo();
      } else {
        console.log(888);
        Message.error("修改失败，请稍后重试");
      }
    },
    async helppslist() {
      let { data } = await this.$ajax.lu.getNeighborMember();
      console.log(data);
      this.handlepslist = data;
    },
    pageChange(item) {
      this.page.page_index = item.page_index;
      this.page.page_limit = item.page_limit;
      this.searchinfo();
    },
    radiustypeconfirm() {
      this.dialogVisible2 = false;
      this.handleinfo();
    },
    handleResult(index, row) {
      if (index === "all") {
        this.radiusdialogData = {
          reqUrl: "batchAssign",
          level: null, 
          ids: this.multipleSelection.map((item) => item.id).join(","),
          dealId: null, 
        };
      } else {
        this.radiusdialogData = {
          reqUrl: "dealEmergency",
          level: row.level,
          id: row.id,
          dealId: Number(row.dealId),
        };
      }
      this.dialogVisible2 = true;
    },
    editinfo(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/handleurgent",
        query: { id: row.id, type: "edit" },
      });
    },
    viewinfo(index, row) {
      this.$router.push({
        path: "/handleurgent",
        query: { id: row.id, type: "view" },
      });
      console.log(index, row);
    },
    handleClick(val) {
      console.log(val);
      this.tableData = this.tablelist.filter((item) => item.state == val);
      this.nohandle = this.tablelist.filter((item) => item.state == 1);
      this.handled = this.tablelist.filter((item) => item.state == 3);
    },
    reset() {
      this.editform = { ...initEditform };
    },
  },
};
</script>

<style scoped>
.main {
  padding: 10px;
}
/deep/ .el-range-editor--small.el-input__inner {
  height: 42px;
  width: 290px;
}
/deep/ .el-tabs__item {
  background-color: #fff;
  margin: 0;
}
/deep/ .el-tabs__item.is-active {
  color: #fff;
  background-color: #409eff;
}
.editcolor {
  color: #409eff;
  padding-left: 5px;
  cursor: pointer;
}
.type /deep/ .el-input--suffix .el-input__inner {
  width: 287px;
}
.nameinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* align-item center */
}
.title-span {
  color: red;
  padding-left: 20px;
}
.buttom {
  padding: 10px 0 20px 0;
  /* width: 500px; */
  text-align: right;
}
.select {
  padding: 15px 64px 0px;
}
.nameinfo2 {
  display: flex;
  align-items: center;
}
.content {
  padding: 95px 54px 0px;
}
.pt {
  padding-bottom: 10px;
}
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
}
.block {
  padding-top: 20px;
  text-align: right;
}
.addsewidth {
  width: 348px;
}
</style>
